<template>
	<view>
		<map class="map-view" @markertap="showDetail" :markers="markers"></map>
		<up-popup :show="show" mode="center" @close="close" @open="open">
			<view>
				{{houseInfo.address}}--{{houseInfo.unitPrice}}
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		GET_HOUSE
	} from '../../api/house';
	const houseInfo = ref({})
	const show = ref(false)
	// 定义方法  
	function open() {  
	  // 打开逻辑，比如设置 show 为 true  
	  show.value = true;  
	  // console.log('open');  
	}  
	  
	function close() {  
	  // 关闭逻辑，设置 show 为 false  
	  show.value = false;  
	  // console.log('close');  
	}  
	// 先去获取房源信息，然后根据房源信息绘制marker
	const markers = ref([])
	const houseList = ref([{
			address: '北京工商管理专修学院',
			longitude: 116.12681099999998,
			unitPrice: 10000,
			latitude: 40.231939,
			id: 1
		},
		{
			address: '八达岭奥特莱斯',
			longitude: 116.17008899999996,
			unitPrice: 12345,
			latitude: 40.23468,
			id: 2
		},
	])
	const addMarker = () => {
		houseList.value.forEach(item => {
			console.log(item)
			markers.value.push({
				id: item.id,
				latitude: item.latitude,
				longitude: item.longitude,
				iconPath: '/static/icon/circle.png',
				width: 100,
				height: 100,
				label: {
					content: `昌平\n2套`,
					bgColor: '#00000000',
					color: '#fff',
					anchorY: -30,
					anchorX: -20
				}
			})
		})
	}
	addMarker()
	// const goDetail = (e) => {
	// 	console.log(e)
	// 	const id = e.detail.markerId
	// 	const detail = houseList.find(item => item.id===id)
	// 	console.log(detail)
	// }
	const showDetail = (e) => {
		const id = e.detail.markerId
		houseInfo.value = houseList.value.find(item => item.id === id)
		open()
	}
</script>

<style lang="scss" scoped>
	.map-view {
		height: 100vh;
		width: 100vw;
	}
</style>